<template>
  <Teleport to="body" :disabled="!isTeleport">
    <div v-if="modelValue" class="modal">
      <div
        class="mask"
        :style="style"
        @click="maskClose && !loading && handleCancel()"
      ></div>
      <div class="modal__main">
        <div class="modal__title line line--b">
          <span>{{ title || t("r.title") }}</span>
          <span
            v-if="close"
            :title="t('r.close')"
            class="close"
            @click="!loading && handleCancel()"
            >✕</span
          >
        </div>
        <!-- 主体内容：传入的content不同，显示不同的内容 -->
        <div class="modal__content">
          <Content v-if="typeof content === 'function'" :render="content" />
          <slot v-else>
            {{ content }}
          </slot>
        </div>
        <div class="modal__btns line line--t">
          <button :disabled="loading" @click="handleConfirm">
            <span class="loading" v-if="loading"> ❍ </span>{{ t("r.confirm") }}
          </button>
          <button @click="!loading && handleCancel()">
            {{ t("r.cancel") }}
          </button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
import { useContext, getCurrentInstance, onBeforeMount } from "vue";
let instance = getCurrentInstance(); // 获得当前组件实例
let ctx = useContext();
onBeforeMount(() => {
  instance._hub = {
    "on-cancel": () => {},
    "on-confirm": () => {},
  };
});

// 使用传统emit的形式使父组件监听，并且通过_hub属性中添加 on-cancel，on-confirm方法实现在API中进行监听
// 确定
const handleConfirm = () => {
  ctx.emit("on-confirm");
  instance._hub["on-confirm"]();
};
// 取消
const handleCancel = () => {
  ctx.emit("on-cancel");
  ctx.emit("update:modelValue", false);
  instance._hub["on-cancel"]();
};
</script>

<style>
</style>